﻿<!doctype html>
<html class="no-js">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="description" content="">
  <meta name="keywords" content="">
  <meta name="viewport"
        content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <title>车生活</title>

  <!-- Set render engine for 360 browser -->
  <meta name="renderer" content="webkit">

  <!-- No Baidu Siteapp-->
  <meta http-equiv="Cache-Control" content="no-siteapp"/>

  <link rel="icon" type="image/png" href="assets/i/favicon.png">

  <!-- Add to homescreen for Chrome on Android -->
  <meta name="mobile-web-app-capable" content="yes">
  <link rel="icon" sizes="192x192" href="assets/i/app-icon72x72@2x.png">

  <!-- Add to homescreen for Safari on iOS -->
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta name="apple-mobile-web-app-title" content="车生活"/>
  <link rel="apple-touch-icon-precomposed" href="assets/i/app-icon72x72@2x.png">

  <!-- Tile icon for Win8 (144x144 + tile color) -->
  <meta name="msapplication-TileImage" content="assets/i/app-icon72x72@2x.png">
  <meta name="msapplication-TileColor" content="#0e90d2">

  <link rel="stylesheet" href="assets/css/amazeui.min.css">
  <link rel="stylesheet" href="assets/css/app.css">
  <style type="text/css">
	.am-tab-panel img {
		width: 100%
	}
	blockquote {
		border-left: 0px;
		font-size: 13px;
		color: #F37B1D;
		padding-top: 0px;
		padding-bottom: 0px;
	}
	.icon{
		font-size: 1.8rem;
	}
</style>

</head>
<body>

<header data-am-widget="header" class="am-header am-header-default">
  <div class="am-header-left am-header-nav">
    <a href="javascript:history.go(-1)" class="">
      <i class="am-header-icon am-icon-chevron-left"></i>
    </a>
  </div>
  <h1 class="am-header-title">
    <a href="#title-link" class="">订单支付</a>
  </h1>
    <div class="am-header-right am-header-nav">
    <a href="javascript: void(0)" id="nav_click"  class="">
      <i class="am-menu-toggle-icon am-icon-th-large am-icon-sm"></i>
    </a>
  </div>
</header>

<div class="am-panel am-panel-default">
  <div class="am-panel-hd" style="line-height:40px;font-size:16px">
  	人工普通洗车
  </div>
  <div class="am-panel-bd">
    <div class="am-g am-g-collapse">
      <div class="am-u-sm-3">价格：</div>
      <div class="am-u-sm-9 am-pagination-right">18元</div>
      <div class="am-u-sm-12">
      	<hr data-am-widget="divider" style="" class="am-divider am-divider-default"/>
      </div>      
      <div class="am-u-sm-3">数量：</div>
      <div class="am-u-sm-9 am-pagination-right">1</div>
      <div class="am-u-sm-12">
      	<hr data-am-widget="divider" style="" class="am-divider am-divider-default"/>
      </div>       
      <div class="am-u-sm-3">总价：</div>
      <div class="am-u-sm-9 am-pagination-right">
      	<span style="color:#F37B1D;font-weight:bold" id="sumprice">18</span>元
      	<input type="hidden" id="sumpricehide" value="18">
      </div>            
    </div>
  </div>


      <!--<div class="am-u-sm-12">
      	<hr data-am-widget="divider" style="" class="am-divider am-divider-default"/>
      </div>      
      <div class="am-u-sm-4">积分抵用：</div>
      <div class="am-u-sm-8 am-pagination-right">
        <input type="tel" maxlength="10"  style="width:150px;display:inline" class="am-form-field am-radius am-order-form" placeholder="可用积分138" id="inputjifen" onblur ="showmsg()" />
        <input type="hidden" value="138" id="hiddenjifen" />
        <span class="am-badge am-badge-warning am-radius" data-am-modal="{target: '#doc-modal-1', closeViaDimmer: 0, width: 350, height: 225}">规则</span>&nbsp;
      </div>
      <div class="am-u-sm-12">
      	<hr data-am-widget="divider" style="" class="am-divider am-divider-default"/>
      </div>       -->
      <!--<div class="am-u-sm-2"></div>
      <div class="am-u-sm-10 am-pagination-right">
      	<span style="color:#F37B1D;font-weight:bold" id="trueprice">&nbsp;</span>
      </div>            -->
    </div>
  </div>
 </div>
</div>



  <div class="am-g">
    <div style="color:gray;font-size:12px;text-align:center;line-height:40px">
      <div class="am-u-sm-6">
    	    ☑不消费随时退款
      </div>
      <div class="am-u-sm-6">
                       ☑过期自动退款
      </div>
    </div>    
  </div> 
 <div class="am-g">
    <div class="am-u-sm-12">
      <button type="button"  class="am-btn am-btn-success am-btn-block"  data-am-modal="{target: '#my-actions'}">
         确认支付
      </button>
    </div>   
  </div>
  
  
<!--弹出框-->
<div class="am-modal am-modal-no-btn" tabindex="-1" id="doc-modal-1">
  <div class="am-modal-dialog">
    <div class="am-modal-hd">积分抵用规则
      <a href="javascript: void(0)" class="am-close am-close-spin" data-am-modal-close>&times;</a>
    </div>
    <div class="am-modal-bd" style="text-align:left">
      1、100积分可抵用1元现金，在商家处消费后可获取积分；<br/>
      2、积分使用，最多只能抵用本次消费最大金额；<br/>
      3、如需人工帮助，请拨打:<a href="tel:4008309277">400 830 9277</a>
    </div>
  </div>
</div>

<div id="doc-modal-2" style="position:fixed;width:40%;left:30%;bottom:200px;margin-left:width/2;margin-top:height/2;display:none">
	<button type="button" class="am-btn am-btn-danger am-round am-btn-block">
		<span id="showtext"></span>
	</button>
</div>

<div class="am-modal-actions" id="my-actions">
  <div class="am-modal-actions-group">
    <ul class="am-list">
      <li class="am-modal-actions-header">请选择支付方式</li>
      <li><a href="resultorder.html"><i class="am-icon-wechat"></i>微信支付</a></li>
      <li><a href="resultorder.html"><i class="icon iconfont icon-zhifubao"></i> 支付宝支付</a></li>
    </ul>
  </div>
  <div class="am-modal-actions-group">
    <button class="am-btn am-btn-secondary am-btn-block" data-am-modal-close>取消</button>
  </div>
</div>

<div style="height: 50px;"></div>
<script type="text/x-handlebars-template" id="amz-tpl">
  {{>navbar navbar}}
</script>
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/amazeui.min.js"></script>
<script src="assets/js/handlebars.min.js"></script>
<script src="assets/js/amazeui.widgets.helper.js"></script>
<script src="assets/js/app.js"></script>
<script type="text/javascript">

  function showmsg(){
  	var inputJiFen = parseInt($('#inputjifen').val());
  	var hiddenJiFen = parseInt($('#hiddenjifen').val());
  	var sumPriceHide = parseInt($('#sumpricehide').val());
  	
    if(inputJiFen>hiddenJiFen){
      $('#showtext').text('积分不足');
      $('#doc-modal-2').show();
      setTimeout("$('#doc-modal-2').fadeOut(1000)",1000);
      $('#inputjifen').val($('#hiddenjifen').val());
    }

    if(isNaN($('#inputjifen').val())){
      $('#showtext').text('输入错误');      
      $('#doc-modal-2').show();
      setTimeout("$('#doc-modal-2').fadeOut(1000)",1000);
      $('#inputjifen').val($('#hiddenjifen').val());
    }

    if(inputJiFen>sumPriceHide*100){
      $('#showtext').text('积分使用过剩');
      $('#doc-modal-2').show();
      setTimeout("$('#doc-modal-2').fadeOut(1000)",1000);
      $('#inputjifen').val(sumPriceHide*100);
    }

    if(inputJiFen>0){
      $('#trueprice').html(sumPriceHide + " - " +(inputJiFen/100) + " = "+(sumPriceHide - (inputJiFen/100)).toFixed(2)+"元");
      $('#showtrueprice').text((sumPriceHide-inputJiFen/100).toFixed(2)+"元");
    }else if(inputJiFen==0){
      $('#trueprice, #showtrueprice').text(sumPriceHide+"元");
    }
  }
</script>
</body>
</html>
